<{include file="v2/header.html"}>
<main class="pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="scroll-reveal">
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">作品创作</h1>
                <p class="text-lightink max-w-2xl">挥洒笔墨，创作属于你的古典诗词作品，传承文化之美</p>
            </div>
        </section>
        
        <!-- 创作区域 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 创作表单 -->
                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6 md:p-8 scroll-reveal">
                    <h2 class="text-xl md:text-2xl font-song font-bold mb-6">创作新作品</h2>
                    
                    <form id="creation-form" class="space-y-6">
                        <div>
                            <label for="work-title" class="block text-ink font-song mb-2">作品标题</label>
                            <input type="text" id="work-title" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar/50 focus:border-cinnabar transition-colors" placeholder="请输入作品标题">
                        </div>
                        
                        <div>
                            <label for="work-type" class="block text-ink font-song mb-2">作品类型</label>
                            <select id="work-type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar/50 focus:border-cinnabar transition-colors">
                                <option value="shi">诗</option>
                                <option value="ci">词</option>
                                <option value="qu">曲</option>
                                <option value="fu">赋</option>
                                <option value="prose">散文</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="work-content" class="block text-ink font-song mb-2">作品内容</label>
                            <div class="flex border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-cinnabar/50 focus-within:border-cinnabar transition-colors">
                                <div class="bg-gray-50 px-3 py-2 border-r border-gray-300 flex flex-col">
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="五言绝句">
                                        <i class="fa fa-file-text-o"></i> 五绝
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="七言绝句">
                                        <i class="fa fa-file-text-o"></i> 七绝
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="五言律诗">
                                        <i class="fa fa-file-text-o"></i> 五律
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="七言律诗">
                                        <i class="fa fa-file-text-o"></i> 七律
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="词牌选择">
                                        <i class="fa fa-th-large"></i> 词牌
                                    </button>
                                </div>
                                <textarea id="work-content" rows="12" class="flex-1 px-4 py-3 focus:outline-none resize-none" placeholder="请在此处创作你的作品..."></textarea>
                            </div>
                            <div class="flex justify-between mt-2 text-sm text-lightink">
                                <span id="char-count">0 字</span>
                                <span>请使用中文标点符号</span>
                            </div>
                        </div>
                        
                        <div>
                            <label for="work-notes" class="block text-ink font-song mb-2">注释与赏析 (可选)</label>
                            <textarea id="work-notes" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar/50 focus:border-cinnabar transition-colors" placeholder="请输入作品注释或赏析..."></textarea>
                        </div>
                        
                        <div class="flex flex-wrap gap-4">
                            <button type="button" class="border border-ink text-ink px-6 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                                保存草稿
                            </button>
                            <button type="submit" class="bg-cinnabar text-rice px-8 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300 font-song transform hover:scale-105">
                                发布作品 <i class="fa fa-paper-plane ml-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 创作提示与帮助 -->
                <div class="space-y-6">
                    <!-- 创作指南 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 scroll-reveal">
                        <h3 class="text-lg font-song font-bold mb-4 flex items-center">
                            <i class="fa fa-lightbulb-o text-cinnabar mr-2"></i> 创作指南
                        </h3>
                        <ul class="space-y-3 text-lightink">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>诗词创作可遵循平仄格律，也可自由发挥</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>词牌选择后将提供相应格律参考</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>作品将经过审核后发布，请勿涉及敏感内容</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>优质作品有机会入选首页推荐</span>
                            </li>
                        </ul>
                        <a href="#" class="inline-block mt-4 text-cinnabar hover:underline">查看详细创作指南 <i class="fa fa-angle-right ml-1"></i></a>
                    </div>
                    
                    <!-- 格律检测工具 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 scroll-reveal">
                        <h3 class="text-lg font-song font-bold mb-4 flex items-center">
                            <i class="fa fa-line-chart text-cinnabar mr-2"></i> 格律检测
                        </h3>
                        <p class="text-lightink mb-4">检测诗词的平仄、押韵等格律要素</p>
                        <button class="w-full border border-cinnabar text-cinnabar px-4 py-2 rounded-lg hover:bg-cinnabar hover:text-rice transition-all duration-300">
                            开始检测 <i class="fa fa-magic ml-1"></i>
                        </button>
                    </div>
                    
                    <!-- 推荐主题 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 scroll-reveal">
                        <h3 class="text-lg font-song font-bold mb-4 flex items-center">
                            <i class="fa fa-bookmark-o text-cinnabar mr-2"></i> 推荐主题
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 春日即景</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 思乡</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 送别</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 咏史</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 山水</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 边塞</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 哲理</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 优秀作品展示 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="flex justify-between items-end mb-8 scroll-reveal">
                <div>
                    <h2 class="text-2xl md:text-3xl font-song font-bold mb-2">优秀创作作品</h2>
                    <p class="text-lightink">欣赏其他用户的精彩创作，获取灵感</p>
                </div>
                <a href="user-works.html" class="hidden md:flex items-center text-cinnabar hover:underline">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 作品1 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow scroll-reveal">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-song font-bold">秋江夜泊</h3>
                            <span class="text-xs bg-paper px-2 py-1 rounded-full">五律</span>
                        </div>
                        <div class="font-song text-ink mb-4 leading-relaxed">
                            寒江浸残月，孤舟泊浅滩。<br>
                            风摇芦苇乱，露湿客衣单。<br>
                            归梦随流水，乡音隔远山。<br>
                            披衣谁与语，星斗落前湾。
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-lightink">张明远</span>
                            </div>
                            <div class="flex items-center space-x-4 text-lightink">
                                <span class="flex items-center"><i class="fa fa-heart-o mr-1"></i> 42</span>
                                <span class="flex items-center"><i class="fa fa-comment-o mr-1"></i> 8</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 作品2 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow scroll-reveal">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-song font-bold">蝶恋花·春思</h3>
                            <span class="text-xs bg-paper px-2 py-1 rounded-full">词</span>
                        </div>
                        <div class="font-song text-ink mb-4 leading-relaxed">
                            庭院深深深几许？<br>
                            柳絮纷飞，又惹春愁起。<br>
                            独倚栏杆风细细，<br>
                            天涯望断无归计。<br><br>
                            梦里常回年少地，<br>
                            燕语呢喃，犹记初相遇。<br>
                            岁月匆匆留不住，<br>
                            落花满地相思意。
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-lightink">李清照(现代)</span>
                            </div>
                            <div class="flex items-center space-x-4 text-lightink">
                                <span class="flex items-center"><i class="fa fa-heart-o mr-1"></i> 78</span>
                                <span class="flex items-center"><i class="fa fa-comment-o mr-1"></i> 15</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 作品3 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow scroll-reveal">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-song font-bold">登黄鹤楼有感</h3>
                            <span class="text-xs bg-paper px-2 py-1 rounded-full">七绝</span>
                        </div>
                        <div class="font-song text-ink mb-4 leading-relaxed">
                            黄鹤楼头望楚天，<br>
                            长江万里入云烟。<br>
                            昔人已乘黄鹤去，<br>
                            唯有诗情留世间。
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-lightink">王浩然</span>
                            </div>
                            <div class="flex items-center space-x-4 text-lightink">
                                <span class="flex items-center"><i class="fa fa-heart-o mr-1"></i> 36</span>
                                <span class="flex items-center"><i class="fa fa-comment-o mr-1"></i> 6</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-8 md:hidden">
                <a href="user-works.html" class="inline-block text-cinnabar hover:underline">
                    查看全部作品 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
        </section>
    </main>
    <script>
        
        
        // 字符计数功能
        $('#work-content').on('input', function() {
            const count = $(this).val().length;
            $('#char-count').text(`${count} 字`);
        });
        
        // 表单提交处理
        $('#creation-form').submit(function(e) {
            e.preventDefault();
            // 这里添加表单提交逻辑
            alert('作品提交成功，等待审核！');
            $(this)[0].reset();
            $('#char-count').text('0 字');
        });
    </script>
    <{include file="v2/footer.html"}>